<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="兑换ID" class="flex-50" prop="userGoodsId">
        <el-input v-model="dataInfo.userGoodsId" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="优惠券名称" class="flex-50" prop="goodsName">
        <el-input v-model="dataInfo.goodsName" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="优惠券编号" class="flex-50" prop="goodsNo">
        <el-input v-model="dataInfo.goodsNo" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="兑换者" class="flex-50" prop="nickName">
        <el-input v-model="dataInfo.nickName" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="兑换者手机" class="flex-50" prop="mobile">
        <el-input v-model="dataInfo.mobile" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="兑换者邮箱" class="flex-50" prop="email">
        <el-input v-model="dataInfo.email" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="兑换日期" class="flex-50" prop="mobile">
        <el-input v-model="dataInfo.exchangeDate" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>

      <el-form-item label="过期日期" class="flex-50" prop="email">
        <el-input v-model="dataInfo.expireDate" class="cms-width" :disabled="isType('update')"></el-input>
      </el-form-item>


      <el-form-item label="优惠券状态" class="flex-50">
        <el-radio-group v-model="dataInfo.goodsState">
          <el-radio :label="1">有效</el-radio>
          <el-radio :label="2">已使用</el-radio>
          <el-radio :label="3">已过期</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="form-footer">
      <el-button type="warning" v-if="isType('save')" @click="add(true)">提交并继续添加</el-button>
      <el-button type="primary" v-if="isType('save')" @click="add(false)">添加</el-button>
      <el-button type="primary" v-if="isType('update')" @click="update()">编辑</el-button>
      <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
    </div>

  </section>

</template>
<script>
  import axios from "axios/index";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns],
    data() {
      let required = va.required();
      let number = va.number();
      return {
        rules: {
        },
        dataInfo: {
          status: 0
        },
        fileList: [],
        isShowImg: false,
        imageUrl: ''
      };
    },
    methods: {
      getDataInfo(id, type) {
        if (type == 'update') {
          axios.all([
            axios.post(this.$api.userGoodsGet, {userGoodsId: id})
          ]).then(axios.spread((res) => {
            console.log(res);
            this.$refs["form"].resetFields();
            this.dataInfo = res.body;
          })).catch(error => {
            console.log(error);
          });
        }
        this.loading = false;
      },
      add(state) {
        this.saveDataInfo(state, this.$api.userGoodsSave, this.dataInfo, "pageList");
      },
      update() {
        this.updateDataInfo(this.$api.userGoodsUpdate, this.dataInfo, "pageList");
      }
    },
    created() {
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
</style>
